<!--车辆管理-->
<template>
  <div style="background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">车辆列表</span>
  </div>
  <!-- 车辆数据搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="车牌号">
        <el-input placeholder="请输入" style="width:220px;"
                  v-model="searchVehicleForm.carnum" @keydown.enter="loadVehicle"></el-input>
      </el-form-item>
      <el-form-item label="持有人">
        <el-input placeholder="请输入" style="width:220px;"
                  v-model="searchVehicleForm.carlid" @keydown.enter="loadVehicle">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadVehicle">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!--车辆列表-->
  <el-card style="margin:20px;">
    <div style="margin:10px 0px 40px 10px;">车辆列表
      <el-button @click="dialogVehicle=true" type="primary" style="float: right;margin-top:-3px;">新建</el-button>
    </div>
    <el-table :data="vehicleArr">
      <el-table-column prop="carnum" label="车牌号" align="center"/>
      <el-table-column prop="brand" label="车辆品牌" align="center" :formatter="VehicleBrandFormatter"/>
      <el-table-column prop="carmodel" label="车辆型号" align="center"/>
      <el-table-column prop="carcolor" label="车身颜色" align="center"/>
      <el-table-column prop="carlid" label="持有人" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="handleDelete(scope.row.carId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 新建车位 -->
  <el-dialog style="width:1000px;padding:40px;"
             :title="dialogTitle" v-model="dialogVehicle" :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车牌号">
            <el-input placeholder="请输入" v-model="searVehicleForm.carnum"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆品牌">
            <el-select placeholder="请选择" v-model="searVehicleForm.brand">
              <el-option v-for="item in Vehiclebrand" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车辆型号">
            <el-input placeholder="请输入" v-model="searVehicleForm.carmodel"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车身颜色">
            <el-input placeholder="请输入" v-model="searVehicleForm.carcolor"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="持有人">
            <el-input v-model="searVehicleForm.carlid" placeholder="请选择"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆图片">
            <!--  图片上传开始  -->
            <el-upload
                v-model:file-list="fileList"
                action="http://localhost:8080/v1/file/upload"
                name="file"
                limit="1"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
            >
              <el-icon>
                <Plus/>
              </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl"/>
            </el-dialog>
            <!--  图片上传结束  -->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <el-button type="primary" @click="submitVehicle">提交</el-button>
      <el-button @click="handleClose">返回</el-button>
    </template>
  </el-dialog>
</template>

<script setup>

import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";

/**图片上传相关代码开始**/
const fileList = ref([]);
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
//移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  //1.得到要删除的图片路径 uploadFile就是我们上传的图片文件对象
  let imgs = uploadFile.response.data;
  //2.给后端发请求,删除图片
  axios.post(BASE_URL + '/v1/file/remove?imgs=' + imgs).then((response) => {
    if (response.data.code == 2000) {
      ElMessage.success('删除成功!');
    }
  })
}
//图片上传后预览
const handlePictureCardPreview = (uploadFile) => {
  dialogVisible.value = true;
  console.log(uploadFile);
}
/**图片上传相关代码结束**/

//车辆数据搜索
const searchVehicleForm = ref({carlid: '', carnum: ''});
const vehicleArr = ref([]);
//查询车辆数据
const loadVehicle = () => {
  let data = qs.stringify(searchVehicleForm.value);
  console.log(data);
  axios.get(BASE_URL + '/v1/vehicle/select/?' + data).then((response) => {
    if (response.data.code == 2000) {
      vehicleArr.value = response.data.data;
      console.log(vehicleArr.value);
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

// 页面加载
onMounted(() => {
  loadVehicle();
})
// 重置搜索
const resetSearch = () => {
  searchVehicleForm.value = {};
  loadVehicle();
};
//弹窗显示
const dialogVehicle = ref(false);
//弹窗标题
const dialogTitle = ref('新建车辆');
//车辆数据
const searVehicleForm = ref({
  carnum: '',
  brand: '',
  carmodel: '',
  carcolor: '',
  carlid: ''
});
const user = ref(getUser());

//新建车辆
const submitVehicle = () => {
  if (fileList.value.length == 0) {
    //确保用户已上传图片
    ElMessage.error("请上传图片!");
    return;
  }
  searVehicleForm.value.imgs = fileList.value[0].response.data;//图片路径
  searVehicleForm.value.userId = user.value.id;//业主id
  let data = qs.stringify(searVehicleForm.value);
  axios.post(BASE_URL + '/v1/vehicle/save', data).then((response) => {
    if (response.data.code == 2000) {
      ElMessage.success('提交成功!');
      dialogVehicle.value = false;
      searchVehicleForm.value = {};
      fileList.value = [];
      loadVehicle();
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}
//关闭功能
const handleClose = () => {
  dialogVehicle.value = false;
  searVehicleForm.value = {};
  loadVehicle();
}
//编辑车辆
const handleEdit = (carId) => {
  dialogVehicle.value = true;
  dialogTitle.value = "编辑车辆";
  axios.get(BASE_URL + '/v1/vehicle/select?carId' + carId).then((response) => {
    if (response.data.code == 2000) {
      searVehicleForm.value = response.data.data[0];
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}
//删除车辆
const handleDelete = (carId) => {
  if (confirm("您确定要删除吗?")) {
    axios.post(BASE_URL + '/v1/vehicle/delete/' + carId).then((response) => {
      if (response.data.code == 2000) {
        ElMessage.success('删除成功!');
        loadVehicle();
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}
//车辆品牌
const Vehiclebrand = ref([
  {value: 10, label: '宝马'},
  {value: 20, label: '奥迪'},
  {value: 30, label: '法拉利'},
  {value: 40, label: '大众'},
  {value: 50, label: '玛莎拉蒂'},
  {value: 60, label: '奔驰'},
  {value: 70, label: '特斯拉'}
]);
//车辆品牌格式化
const VehicleBrandFormatter = (row, column, cellValue, index) => {
  if (cellValue == 10) {
    cellValue = '宝马';
  } else if (cellValue == 20) {
    cellValue = '奥迪';
  } else if (cellValue == 30) {
    cellValue = '法拉利';
  } else if (cellValue == 40) {
    cellValue = '大众';
  }else if (cellValue == 50) {
    cellValue = '玛莎拉蒂';
  }else if (cellValue == 60) {
    cellValue = '奔驰';
  }else if (cellValue == 70) {
    cellValue = '特斯拉';
  }
  return cellValue;
}
</script>

<style scoped>

</style>
